<style>
    .bjui-pageContent{
        margin: 0 auto;
    }
    #template_input {
        max-width: 600px;
        margin-left: 30px;

    }
    #template_input .bjui-row {
        display: inline-block;
        width: 100%;
        margin-bottom: 20px;
    }
    #template_input .bjui-row:after {
        clear: both;
    }
    #template_input .row-label {
        width: 25%;
        float: left;
        height: 15px;
        line-height: 25px;
    }
    #template_input .row-input {
        width: 75%;
        float: left;
    }
    .form-control{
        width:300px;
    }
    #template_input .row-label, #template_input .row-input {
        margin-bottom: 5px;
    }
    .messageInfo{
        color: red;
        font-size: 20px;
        margin-bottom: 20px;
   }
</style>
<div class="bjui-pageContent" id="template_input">

    @if(isEmpty(templateManage)){
        <h2 class="messageInfo">尚未完成模板编辑</h2>
    @}

    <form method="post" action="/system/staticHtml/saveStatic" id="j_model_form" data-toggle="validate" data-autorefresh="true" data-alertmsg="false">
        <div class="bjui-row">
            <label class="row-label">模板路径</label>
            <div class="row-input">
                <input type="text" readonly name="templateName" value="${tplName!}">
                .html
                <input type="hidden" name="templateId" value="${templateManage.templateId!}">
            </div>
        </div>
        <div class="bjui-row">
            <label class="row-label">渲染模板</label>
            <div class="row-input">
                <input type="text" name="renderTemplateName" data-rule="required" value="${templateManage.renderTemplateName!}">
                .html
            </div>
        </div>
        <div class="bjui-row">
            <label class="row-label">存储路径类型</label>

            <div class="row-input">
                @if(has(templateManage)){
                <label><input type="radio" name="storagePathType" value="0" ${(isNotEmpty(templateManage.storagePathType)&&strutil.contain(templateManage.storagePathType,'0'))?'checked':''}>私有路径</label>
                <label><input type="radio" name="storagePathType" value="1" ${(isNotEmpty(templateManage.storagePathType)&&strutil.contain(templateManage.storagePathType,'1'))?'checked':''}>公共路径</label>
                @} else {
                <label><input type="radio" name="storagePathType" value="0" checked>私有路径</label>
                <label><input type="radio" name="storagePathType" value="1">公共路径</label>
                @}

            </div>
        </div>

        <div class="bjui-row">
            <label class="row-label">关联文件</label>
            <div class="row-input">
                <button type="button" id="addFileBtn" class="btn-blue">新增关联</button>
            </div>
        </div>
        <div class="bjui-row">
            <div id="newRelationFile">
                @for(item in templateRelationManageList){
                <div class="list">
                    <label class="row-label">关联文件名</label>
                    <div class="row-input">
                        <input name="fileName[${itemLP.index-1}]" type="text" value="${item.templateName}">
                        .html
                        <button type="button" data-index="${itemLP.index-1}" class="btn-red pull-right deleteFileBtn">删除</button>
                    </div>
                </div>
                @}
            </div>
        </div>
        <div class="bjui-row">
            <label class="row-label">触发静态化文件</label>
            <div class="row-input">
                <button type="button" id="addStaticBtn" class="btn-blue">新增触发</button>
            </div>
        </div>
        <div class="bjui-row">
            <div id="newStaticFile">
                @for(item in templateTriggerManageList){
                <div class="list">
                    <label class="row-label">触发静态化文件文件名</label>
                    <div class="row-input">
                        <input name="staticFileName[${itemLP.index-1}]" type="text" value="${item.templateName}">
                        .html
                        <button type="button" data-index="${itemLP.index-1}" class="btn-red pull-right deleteStaticBtn">删除</button>
                    </div>
                </div>
                @}
            </div>
        </div>
        <div class="bjui-row">
            <label class="row-label">静态化类型</label>
            <div class="row-input">

                @if(has(templateManage)){
                <label><input type="radio" name="staticType" value="0" ${(isNotEmpty(templateManage.staticType)&&strutil.contain(templateManage.staticType,'0'))?'checked':''}>单页静态化</label>
                <label><input type="radio" name="staticType" value="1" ${(isNotEmpty(templateManage.staticType)&&strutil.contain(templateManage.staticType,'1'))?'checked':''}>关联静态化</label>
                @} else {
                <label><input type="radio" name="staticType" value="0" checked>单页静态化</label>
                <label><input type="radio" name="staticType" value="1">关联静态化</label>
                @}

            </div>
        </div>
    </form>
</div>
<div class="bjui-pageFooter">
    <ul>
        <li><button  type="submit" class="btn btn-blue" data-icon="save">保存修改</button></li>
    </ul>
</div>
<script>
    $('#addFileBtn').on('click', addRelationFile);
    $('#addStaticBtn').on('click', addStaticFile);
    $('#newRelationFile').on('click', '.deleteFileBtn', deleteRelationFile);
    $('#newStaticFile').on('click', '.deleteStaticBtn', deleteStaticFile);
    var relationLength = $('#newRelationFile .row-input').length; // 关联关联删除按钮个数，对应关联文件个数
    var staticLength = $('#newStaticFile .row-input').length; // 关联静态化文件删除按钮个数，对应静态化文件个数
    // 添加关联文件列表
    function addRelationFile() {
        var relationFileTemplate = '<div class="list">' +
            '<label class="row-label">关联文件名</label>' +
            '                <div class="row-input">' +
            '                    <input name="fileName[' + relationLength + ']" type="text" class="form-control">' +
            '                    .html' +
            '                    <button type="button" data-index="' + relationLength + '" class="btn btn-red pull-right deleteFileBtn">删除</button>' +
            '                </div>' +
            '</div>';
        $('#newRelationFile').append(relationFileTemplate);
        relationLength ++;
    }
    // 添加静态文件列表
    function addStaticFile() {
        var staticFileTemplate = '<div class="list">' +
            '<label class="row-label">触发静态化文件文件名</label>' +
            '                <div class="row-input">' +
            '                    <input name="staticFileName[' + staticLength + ']" type="text" class="form-control">' +
            '                    .html' +
            '                    <button type="button" class="btn btn-red pull-right deleteStaticBtn">删除</button>' +
            '                </div>' +
            '</div>';
        $('#newStaticFile').append(staticFileTemplate);
        staticLength ++;
    }
    // 删除关联文件
    function deleteRelationFile(e) {
        var event = e || window.event;
        $(event.target).parents('.list').remove();
    }
    // 删除静态文件
    function deleteStaticFile(e) {
        var event = e || window.event;
        $(event.target).parents('.list').remove();
    }

</script>
